<template>
	<view>
		<view class="list">
			<view class="item" v-for="(item, index) in list" :key="index">
				<view class="lebel">
					{{ item.label }}
				</view>
				<view class="icon">
					<u-icon name="arrow-right" color="#999999"></u-icon>
				</view>
			</view>
		</view>
		<view class="add-btn">
			<u-button size="mini" shape="circle" :custom-style="customStyleEdit" @click="toPath">添加</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				customStyleEdit: {
					color: '#FFF',
					background: '#F3060D',
					width: '167rpx',
					height: '64rpx'
				},
				list: [
					{
						label: '问题标题'
					},
					{
						label: '如何取消订单'
					},
					{
						label: '如何退款'
					}
				]
			};
		},
		methods: {
			toPath() {
				uni.navigateTo({
					url: '/pages/customer-service/edit'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.add-btn {
	margin-top: 22rpx;
	// padding: 0 30rpx;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}
.list {
	background-color: #FFF;
	border-radius: 10rpx;
	padding: 0 30rpx;
	.item {
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1rpx solid #F4F5F7;
		.label {
			font-size: 32rpx;
			font-weight: 400;
			color: #333333;
		}
	}
	.item:last-child {
		border-bottom: 0;
	}
}
</style>
<style>
	page {
		background-color: #F4F5F7;
		padding: 25rpx;
		box-sizing: border-box;
	}
</style>